<template>
  <div class="userIndexContainer">
    <title-bar title="用户中心" isbackIndex></title-bar>
    <!-- 离线模式： -->
    <div class="userIndex-container" v-show="Object.keys(userInfo).length==0">
      <div class="offline-tips">
        <h6>您现在使用的是离线模式</h6>
        <h5>登录后解锁更多功能</h5>
        <router-link class="login-btn" tag="div" to="/user/login">立即登录</router-link>
      </div>
      <div class="shortcut">
        <switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
        <div class="list-wrapper" ref="listwrapper">
          <!-- 显示第一个列表 -->
          <scroll
            v-if="currentIndex===0"
            :data="favoriteList"
            class="list-scroll"
            ref="songList"
            :refreshDelay="100"
          >
            <div class="list-inner">
              <song-list :songs="favoriteList" @select="selectSong" v-if="favoriteList.length>0"></song-list>
            </div>
          </scroll>
          <scroll class="list-scroll" v-if="currentIndex===1" ref="playList" :refreshDelay="100">
            <div class="list-inner">
              <song-list :songs="playHistory" @select="selectSong" v-if="playHistory.length>0"></song-list>
            </div>
          </scroll>
        </div>
      </div>
      <div class="empty-wrapp" v-show="noResult">
        <van-empty :description="emptyTitle" />
      </div>
    </div>
    <user-center v-if="Object.keys(userInfo).length!=0"></user-center>
    <router-view></router-view>
  </div>
</template>

<script>
import TitleBar from "@/base/title-bar/title-bar";
import Switches from "@/base/switches/switches";
import SongList from "@/base/song-list/song-list-normal";
import Scroll from "@/base/scroll/scroll";
import Song from "@/common/song";
import { playListMixin } from "@/common/mixin.js";
import { mapGetters, mapActions } from "vuex";
import { Empty } from "vant";
import UserCenter from "@/views/user/userCenter/userCenter";
export default {
  mixins: [playListMixin],
  data() {
    return {
      currentIndex: 0,
      switches: [{ name: "我喜欢的" }, { name: "最近听的" }]
    };
  },
  computed: {
    ...mapGetters(["favoriteList", "playHistory", "userInfo"]),
    noResult() {
      if (this.currentIndex === 0) {
        return !this.favoriteList.length;
      } else {
        return !this.playHistory.length;
      }
    },
    emptyTitle() {
      if (this.currentIndex === 0) {
        return "暂无喜欢歌曲";
      } else {
        return "你还没有听过歌曲";
      }
    }
  },
  components: {
    TitleBar,
    Switches,
    Scroll,
    SongList,
    [Empty.name]: Empty,
    UserCenter
  },
  methods: {
    ...mapActions(["insertSong"]),
    switchItem(index) {
      this.currentIndex = index;
    },
    selectSong(song, index) {
      this.insertSong(new Song(song));
    },
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.listwrapper.style.bottom = bottom;
      this.$refs.songList && this.$refs.songList.refresh();
      this.$refs.playList && this.$refs.playList.refresh();
    }
  }
};
</script>

<style lang="less" scoped>
.offline-tips {
  padding: 20px 0;
  h6 {
    text-align: center;
    font-size: 16px;
  }
  h5 {
    font-size: 14px;
    text-align: center;
    color: #c3c3c3;
    margin-top: 10px;
  }
  .login-btn {
    width: 140px;
    height: 32px;
    background-color: @color-sub-theme;
    line-height: 32px;
    text-align: center;
    border-radius: 50px;
    font-size: 14px;
    margin: 0 auto;
    margin-top: 15px;
  }
}
.userIndexContainer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  background: #222;
}
.userIndex-container {
  margin-top: 50px;
  height: 100%;
  background-color: #222;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  .shortcut {
    .list-wrapper {
      position: absolute;
      top: 220px;
      bottom: 0;
      width: 100%;
      .list-scroll {
        height: 100%;
        overflow: hidden;
        .list-inner {
          padding: 20px 20px;
          padding-top: 0;
        }
      }
    }
  }
}
</style>